<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="6">
        <div class="picItem">
          <div class="picItem_title">产品数量</div>
          <div class="picItem_num">{{ dataNum.proCount }}</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="picItem">
          <div class="picItem_title">设备数量</div>
          <div class="picItem_num">{{ dataNum.deviceCount }}</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="picItem">

        </div>
      </el-col>
      <el-col :span="6">
        <div class="picItem">

        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <div id="chart" ref="chart"></div>
      </el-col>
      <el-col :span="12">

      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getNum } from '@/api/index.js'
import { log } from 'util'

export default {
  data() {
    return {
      dataNum: {},
      // chartData: [],
      myChart: null
    }
  },
  methods: {
    // initChart() {
    //   var chartData = this.chartData
    //   this.myChart = echarts.init(this.$refs.chart)
    //   // 调用setOption绘制图表
    //   this.myChart.setOption({
    //     title: {
    //       text: '产品所属设备统计',
    //       subtext: '',
    //       left: 'center',
    //       top: '4%',
    //     },
    //     tooltip: {
    //       trigger: 'item'
    //     },
    //     legend: {
    //       orient: 'vertical',
    //       top: '10%',
    //       left: 'left'
    //     },
    //     series: [
    //       {
    //         name: 'Access From',
    //         type: 'pie',
    //         radius: ['40%', '70%'],
    //         avoidLabelOverlap: false,
    //         padAngle: 5,
    //         itemStyle: {
    //           borderRadius: 10
    //         },
    //         label: {
    //           show: false,
    //           position: 'center'
    //         },
    //         emphasis: {
    //           label: {
    //             show: true,
    //             fontSize: 40,
    //             fontWeight: 'bold'
    //           }
    //         },
    //         labelLine: {
    //           show: false
    //         },
    //         data: chartData
    //       }
    //     ]
    //   })
    // },
    getNum() {
      getNum().then(res => {
        this.dataNum = res.data.data
        var chartData = []
        res.data.data.dtos.forEach(item => {
          delete item.id
          const newObj = Object.keys(item).reduce((acc, key) => {
            if (key == 'proName') {
              acc['name'] = item[key];
            }
            if (key == 'devCount') {
              acc['value'] = item[key];
            }
            return acc;
          }, {});
          chartData.push(newObj)
        });
        // this.chartData = chartData
        console.log(chartData);
        // var chartData = this.chartData
        this.myChart = echarts.init(this.$refs.chart)
        // 调用setOption绘制图表
        this.myChart.setOption({
          title: {
            text: '产品所属设备统计',
            subtext: '',
            left: 'center',
            top: '4%',
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            top: '10%',
            left: 'left'
          },
          series: [
            {
              name: '数量',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              padAngle: 5,
              itemStyle: {
                borderRadius: 10
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: chartData
            }
          ]
        })
      })
    }
  },
  created() {
    // this.getNum()
  },
  mounted() {
    this.getNum()
    // this.initChart()
  }
}
</script>

<style lang="scss" scoped>
#chart {
  height: 400px;
  margin-top: 10px;
  border-radius: 10px;
  background-color: #f4f8ff;
  box-shadow: 2px 2px 2px 2px rgb(159, 159, 159);

}

.picItem {
  height: 180px;
  background: #D3E3FD;
  border-radius: 10px;
  box-shadow: 2px 2px 2px 2px rgb(159, 159, 159);
  position: relative;
  overflow: hidden;
  // background-repeat: repeat-x;
  background-size: cover;
  background-image: url('https://t7.baidu.com/it/u=363611284,1625100560&fm=193&f=GIF');
}

.picItem_title {
  font-size: 24px;
  font-weight: bold;
  font-family: "楷体";
  // color: #409EFF;
  // text-shadow: 2px 2px 2px white;
  color: rgb(255, 255, 255);
  text-shadow: 2px 2px 2px black;
  position: absolute;
  bottom: 20px;
  left: 20px;
}

.picItem_num {
  color: #409EFF;
  text-shadow: 2px 2px 2px white;
  // color: rgb(255, 255, 255);
  // text-shadow: 2px 2px 2px black;
  font-family: "楷体";
  font-size: 40px;
  font-weight: bold;
  position: absolute;
  top: 30px;
  left: 20px;
}
</style>
